<style>
    .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
        background-color:#e2ffe2;
    }
</style>
<div id="main-content">
    <!-- SAMPLE BOX CONFIGURATION MODAL FORM-->
    <!-- /SAMPLE BOX CONFIGURATION MODAL FORM-->
    <div class="container">
        <div class="row">
            <div id="content" class="col-lg-12">
                <!-- PAGE HEADER-->
                <div class="row">
                    <div class="col-sm-12">
                        <div class="page-header">
                            <!-- STYLER -->

                            <!-- /STYLER -->
                            <!-- BREADCRUMBS -->
                            <ul class="breadcrumb">
                                <li>
                                    <i class="fa fa-home"></i>
                                    <a href="index.html">首页</a>
                                </li>
                                <li>查看</li>
                            </ul>
                            <!-- /BREADCRUMBS -->
                            <div class="clearfix">
                                <h3 class="content-title pull-left">查看</h3>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /PAGE HEADER -->
                <!-- CALENDAR -->
                <div class="row">
                    <div class="col-md-12">
                        <!-- BOX -->
                        <div class="box border">
                            <div class="box-title">
                                <h4><i class="fa fa-calendar"></i>日程表</h4>
                                <div class="tools">
                                </div>
                            </div>
                            <div class="box-body">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="box-border">
                                            <div class="box-title">
                                                <h4><span class="hidden-inline-mobile"></span></h4>
                                            </div>
                                            <div class="box-body">
                                                <div class="tabbable header-tabs" style="margin-top:-15px">
                                                    <ul class="nav nav-tabs">
                                                        <li class="{{!LookOrYue?'active':''}}"><a ng-click="changeLookOrYue()"><i class=""></i><span class="hidden-inline-mobile">查好友</span></a></li>
                                                        <li class="{{LookOrYue?'active':''}}"><a ng-click="changeLookOrYue()"><i class=""></i><span class="hidden-inline-mobile">约好友</span></a></li>
                                                    </ul>
                                                </div>
                                                <div class="input-group">
                                                    <input ng-model="inputUserName" type="text" value="" class="form-control" placeholder="联系人筛选" id="event-title" />
                                                    <span class="input-group-btn">
                                                        <a href="javascript:;" id="add-event" class="btn btn-info" ng-click=""><i class="fa fa-plus"></i>添加好友</a>
                                                    </span>
                                                </div>
                                                <div ng-show="!LookOrYue" class="input-group">
                                                    <input ng-model="inputClipName" type="text" class="form-control" placeholder="日程筛选"/>
                                                    <span class="input-group-btn">
                                                        <a class="btn btn-info"><i class="fa fa-search"></i></a>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div ng-show="LookOrYue" class="box border blue">
                                            <table class="table table-hover" >
                                                <thead>
                                                <tr>
                                                    <th style="width:50%">好友Z账号</th>
                                                    <th style="width:50%">好友权限</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr ng-repeat="item in MyFriend|filter:{userTiming:inputUserName}|filter:{viewPermission:true}" ng-click="userClipShow(item.userTiming,item.editPermission)">
                                                    <td style="width:30%" ng-bind="item.userTiming"></td>
                                                    <td style="width:70%" ng-init="userPermission=item.editPermission?'管权限':item.viewPermission?'看权限':'约权限'">{{userPermission}}</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="list-group" ng-show="!LookOrYue">
                                            <div class="tabs-left">
                                                <ul class="nav nav-tabs" style="width:100%" ng-repeat="option in MyFriend|filter:{userTiming:inputUserName}|filter:{viewPermission:true}">
                                                    <li class="{{ActiveLi==$index?'active':''}}"><a class="btn" ng-init="userPermission=option.editPermission?'管权限':option.viewPermission?'看权限':'约权限'" ng-bind="option.userTiming+'  '+userPermission" ng-click="userClipListShow(option.userTiming,option.editPermission);changeActiveLi($index)"></a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-9">
                                        <div data-ui-view="CalOrList"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /BOX -->
                    </div>
                </div>
                <!-- /CALENDAR -->
                <div class="footer-tools">
                    <a class="go-top">
                        <i class="fa fa-chevron-up"></i> Top
                    </a>
                </div>
            </div><!-- /CONTENT-->
        </div>
    </div>
</div>